<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .boy{
            width: 300px;
            text-align: center;
            font-size: 20px;
        }
    img{
        width: 200px;
        height: 200px;
    }
    </style>
</head>
<body>
    <h1>详情页</h1>
    <div class="boy"></div>
    <button onclick="oo()">购物车</button>
  <script src="https://code.jquery.com/jquery-3.7.1.js"></script>
<script>
   var a= localStorage.getItem('11')
   var id= localStorage.getItem('1')
console.log(id);

   var b= JSON.parse(a)
   console.log(b);
   //渲染
   function fun(){
    $('.boy').html('')
    b.forEach(item=>{
        if(item.id==id){
            $('.boy').append(`
            <div  onclick="fu(${item.id})"><img src="${item.img}" alt="">
            <br><span>${item.name}</span>
            <br><span>价格:${item.Price}</span>
             <button onclick="kk(${item.id})">加入购物车</button>
             </div>`)
        }
    })
   }
fun()
var arr=[]
function kk(id){
    k=b.find(item=>item.id==id)
    arr.push(k)
    localStorage.setItem('3',JSON.stringify(arr))
}
//购物车
function oo(){
    location.assign("./购物车.html")
}
</script>
</body>
</html>